<template>
  <div class="editAvatar">
    <div class="box">
      <van-uploader class="avater" :after-read="afterRead" />
    </div>
    <footer>
      <p @click="$router.back()">返回</p>
      <p>选择头像</p>
      <p>保存</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file);
};
</script>
<style lang="scss" scoped>
.editAvatar {
  height: 100vh;
  .box {
    height: 100vh;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #18b4ed;
    p {
      width: 33.33%;
      color: #fff;
      text-align: center;
      font-size: 18px;
    }
  }
}
</style>